<template>
	<view class="container">
		<view class="item">
			<view class="title">
				关于我们
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="item">
			<view class="title">
				清除缓存
			</view>
			<view class="right_part">
				<view class="">
					856.79KB
				</view>
				<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
			</view>
			
		</view>
		<view class="item">
			<view class="title">
				服务协议
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="item">
			<view class="title">
				隐私政策
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="item" @click="upversion()">
			<view class="title">
				版本更新
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<HandleBtn btnName = "退出登录" @click.native="getout"></HandleBtn>
		<!-- 版本更新 -->
		<view class="version_update" v-if="isShowVersionInfo">
			<view class="imgs">
				<image src="../../static/img/myCenter/version.png" mode="" class="big_model"></image>
				<image src="../../static/img/myCenter/delete.png" mode="" class="cancel_model" @click="hideVersionInfo"></image>
			</view>
			<view class="content">
				{{version}}
			</view>
			<view class="btn">
				<button type="default">立即更新</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
		components:{
			HandleBtn
		},
		data() {
			return {
				version: "1、这是更新内容这是更新内容这是更新内容这是更新内容。",
				isShowVersionInfo: false,
			}
		},
		methods: {
			
			getout(){
				console.log("111")
				uni.clearStorage();
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			upversion(){
				this.isShowVersionInfo = true;
			},
			hideVersionInfo() {
				this.isShowVersionInfo = false;
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		padding-bottom: 60rpx;
		padding:0 24rpx;
		box-sizing: border-box;
	}
	image{
		width:14rpx;
		height: 26rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color: #333333;
		padding:28rpx 0;
	}
	.right_part{
		display: flex;
		align-items: center;
	}
	.right_part image{
		margin-left: 24rpx;
	}
	.version_update {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgb(1,1,1,.8);
	}
	.version_update .btn{
		position: absolute;
		top: 750rpx;
		left: 170rpx;
		width: 55%;
		
	}
	.version_update .btn button{
		background:linear-gradient(0deg,rgba(255,160,8,1),rgba(255,131,5,1));
		color: #fff;
		border-radius: 80rpx;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 30rpx;
		box-shadow: 2px 2px 6px rgba(255,160,8,1);
	}
	.version_update .btn button::after{
		border: none;
	}
	.version_update .content {
		width: 415rpx;
		font-size: 22rpx;
		color: #666666;
		position: absolute;
		top: 500rpx;
		left: 160rpx;
	}
	.version_update .imgs{
		
	}
	.big_model {
		width: 475rpx;
		min-height: 632rpx;
		position: absolute;
		top: 262rpx;
		left: 137rpx;
	
	}
	
	.cancel_model {
		position: absolute;
		top: 920rpx;
		left: 347rpx;
		width: 55rpx;
		height: 55rpx;
		margin-top: 30rpx
	}
	
</style>
